<template>
  <div class="difficult_detail">
    <div class="title">
      <p class="tip">{{ changeList?.issuefxName }}-详情</p>
      <button class="btn" @click="goBack">返回</button>
    </div>
    <div class="details">
      <div class="information">
        <p class="titBox">基本信息</p>
        <div class="essential bottom">
          <!-- <div class="faultDecriptSummary">测试任务事件标题</div> -->
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="问题单号">
              {{ changeList?.issuefxNo ? changeList?.issuefxNo : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="问题标题">
              {{ changeList?.issuefxName ? changeList?.issuefxName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="问题等级">
              {{ changeList?.seriousLev ? changeList?.seriousLev : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="问题发现人">
              {{ changeList?.reportname ? changeList?.reportname : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="问题描述">
              {{ changeList?.issuefxText ? changeList?.issuefxText : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="技术经理">
              {{ changeList?.auditName ? changeList?.auditName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="问题分类">
              {{ changeList?.issueFenlei ? changeList?.issueFenlei : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="问题来源">
              {{ changeList?.issuesource ? changeList?.issuesource : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="问题等级">
              {{ changeList?.seriousLev ? changeList?.seriousLev : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ changeList?.creatTime ? changeList?.creatTime : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="发现时间">
              {{ changeList?.reporttime ? changeList?.reporttime : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="处理描述">
              {{ changeList?.dealDescription ? changeList?.dealDescription : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="涉及系统">
              {{ changeList?.sysName ? changeList?.sysName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="问题所在机构名">
              {{ changeList?.issueOrgName ? changeList?.issueOrgName : "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="建设单位">
              {{ changeList?.orgName ? changeList?.orgName : "--" }}</el-descriptions-item
            >
            <el-descriptions-item label="建设部门">
              {{ changeList?.deptName ? changeList?.deptName : "--" }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="technological">
        <p class="titBox">流程记录</p>
        <div class="block">
          <!--  v-if="show" activities-->
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              type="primary"
              size="large"
              :timestamp="activity.performerTime"
              placement="top"
              :reverse="true"
              color="#007AF5 "
            >
              <el-card class="box-card">
                <div class="text">
                  <span>任务名称</span>
                  <span class="item">{{ activity.taskName }}</span>
                </div>
                <div class="text">
                  <span>操作名称</span>
                  <span class="item">{{ activity.performName }}</span>
                </div>
                <div class="text">
                  <span>处理意见</span>
                  <span class="item">
                    {{ activity.performDesc }}
                  </span>
                </div>
                <div class="text">
                  <span>处理人</span>
                  <span class="item">{{ activity.performerName }}</span>
                </div>
                <div class="text">
                  <span>值班电话</span>
                  <span class="item">{{ activity.performerTel }}</span>
                </div>
                <div class="text">
                  <span>下一步名称</span>
                  <span class="item">{{ activity.nextTaskName }}</span>
                </div>
                <div class="text">
                  <span>下一步操作</span>
                  <span class="item">{{ activity.nextPerformerDesc }}</span>
                </div>
                <div class="text">
                  <span>操作时间</span>
                  <span class="item">{{ activity.performerTime }}</span>
                </div>
              </el-card>

              <!-- <el-card class="box-card">
                                <div v-for="o in 8" :key="o" class="text item">
                                    {{ "列表内容 " + o }}
                                </div>
                            </el-card> -->
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-empty description="暂无流程" v-if="!show"></el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { questionListDetail } from "@/http/api/problem";
import { pubflowlist } from "@/http/api/edition";
const route = useRoute();
const router = useRouter();
const changeCode = ref(router.options.history.state.back.split("/")[1]);
const changeList = ref("");
const activities = reactive([]);
const type = ref(route.params.type);
const questionId = ref(route.params.value);

const pageNum = ref("1");
const pageSize = ref("20");
onMounted(() => {
  getDifficult_List();
  pubflow_list();
});
const getDifficult_List = () => {
  questionListDetail({
    questionId: questionId.value,
  }).then((res) => {
    console.log(res);
    if ((res as any).data.code !== 0) {
      ElMessage({
        message: (res as any).data.msg,
        type: "error",
      });
      return;
    }
    changeList.value = res.data.data;
  });
};
const pubflow_list = () => {
  pubflowlist({
    pageSize: pageSize.value,
    pageNum: pageNum.value,
    bizId: questionId.value,
  }).then((res) => {
    if ((res as any).data.code !== 0) {
      ElMessage({
        message: (res as any).data.msg,
        type: "error",
      });
      return;
    }
    activities.length = 0;
    (activities as any).push(...res.data.data.rows);
    total.value = res.data.data.total;
    if (!total.value) {
      show.value = false;
    }
  });
};
const goBack = () => {
  //  router.go(-1);
  router.push({
    name: changeCode.value,
    params: {
      type: type.value,
    },
  });
};
</script>
<style lang="less" scoped>
.difficult_detail {
  width: 100%;
  height: 100vh;
  // background: rgb(84, 84, 95);
  background: #eaeef4;
  padding: 20px;
  box-sizing: border-box;
  .title {
    display: flex;
    justify-content: space-between;
    height: 34px;
    margin-bottom: 12px;
    .tip {
      line-height: 34px;
      font-size: 14px;
      font-weight: 400;
      color: #46545d;
    }
    .btn {
      width: 80px;
      height: 34px;
      background: #007af5;
      border-radius: 2px;
      color: #fff;
      font-size: 12px;
      border: 0;
    }
  }
  .details {
    display: flex;
    justify-content: space-between;
    .information {
      width: 100%;
      .titBox {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #46545d;
        margin-bottom: 20px;
      }

      .essential {
        // margin-bottom: 40px;
        padding: 20px;
        background: #fff;
        border-radius: 6px;
        .faultDecriptSummary {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }
        .el-descriptions {
          :deep(.is-bordered) {
            //border-collapse: separate;
            tbody {
              margin-bottom: 3px;

              .el-descriptions-row {
                // :deep(.el-descriptions-item__label:not(.is-bordered-label)) {
                // }
                .el-descriptions-item__cell {
                  &.el-descriptions-item__label {
                    background: #fafafa !important;
                    padding: 10px 10px 0;
                    border: 3px solid #fafafa;
                    border-bottom: none;
                    border-right: 3px solid #fff;
                    font-size: 14px;
                    font-weight: 400;
                    color: #929ea8;
                  }
                  &.el-descriptions-item__content {
                    background: #fafafa !important;
                    padding: 5px 10px;
                    border-left: 3px solid #fafafa;
                    border-top: none;
                    border-right: 3px solid #fff;
                    border-bottom: 3px solid #fff;
                    font-size: 14px;
                    font-weight: 400;
                    color: #46545d;
                  }
                }
                :deep(.el-descriptions-item__label) {
                  //margin-right: 3px;
                  background: #fafafa !important;
                  padding: 10px 10px 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
.details {
  display: flex;
  justify-content: space-between;
  .information {
    width: 60%;
    // margin: auto;
    .titBox {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #46545d;
      margin-bottom: 20px;
    }

    .essential {
      // margin-bottom: 40px;
      padding: 20px;
      background: #fff;
      border-radius: 6px;
      .faultDecriptSummary {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #46545d;
        margin-bottom: 20px;
      }
      .el-descriptions {
        :deep(.is-bordered) {
          //border-collapse: separate;
          tbody {
            margin-bottom: 3px;

            .el-descriptions-row {
              // :deep(.el-descriptions-item__label:not(.is-bordered-label)) {
              // }
              .el-descriptions-item__cell {
                &.el-descriptions-item__label {
                  background: #fafafa !important;
                  padding: 10px 10px 0;
                  border: 3px solid #fafafa;
                  border-bottom: none;
                  border-right: 3px solid #fff;
                  font-size: 14px;
                  font-weight: 400;
                  color: #929ea8;
                }
                &.el-descriptions-item__content {
                  background: #fafafa !important;
                  padding: 5px 10px;
                  border-left: 3px solid #fafafa;
                  border-top: none;
                  border-right: 3px solid #fff;
                  border-bottom: 3px solid #fff;
                  font-size: 14px;
                  font-weight: 400;
                  color: #46545d;
                }
              }
              :deep(.el-descriptions-item__label) {
                //margin-right: 3px;
                background: #fafafa !important;
                padding: 10px 10px 0;
              }
            }
          }
        }
      }
    }
  }
  .technological {
    width: 35%;
    .titBox {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #46545d;
      margin-bottom: 20px;
    }
    .el-divider {
      .el-divider__text {
        font-size: 16px;
        line-height: 35px;
      }
    }
    .block {
      .el-timeline {
        width: 80%;
        margin: 0 auto;
        .el-timeline-item__tail {
          //width: 1px;

          border: 1px solid #007af5;
        }
        :deep(.el-timeline-item__timestamp) {
          font-size: 14px;
          font-weight: 400;
          color: #46545d;
        }
        :deep(.el-timeline-item__content) {
          color: #fff;
          .box-card {
            border-radius: 10px;
            .el-card__body {
              .text {
                min-height: 30px;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                font-weight: 400;
                color: #929ea8;
                .item {
                  max-width: 70%;
                  color: #46545d;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
